<template>
	<view class="pagesBox">
		<view style="position: sticky;top: 0%;z-index: 999;overflow: hidden;background-color: #f7f8fa;">
			<my-nav count="积分充值" color="#000" :bgImage="`${baseUrl}/static/index/bg01.png`" :isShow="true" :isSwitchTab="false"></my-nav>
		</view>
		<view class="pagesBgImg">
			<image :src="`${baseUrl}/static/index/bg01.png`" mode="widthFix" style="width: 100%;"></image>
			<image :src="`${baseUrl}/static/index/bg02.png`" mode="widthFix" style="width: 100%;" class="image2"></image>
		</view>
		<view class="brokerageCont">
			<view class="moneyNum">
				<view class="canDraw">账户积分</view>
				<view class="money">{{fmtMoney(balanceMoney) || '0.00'}}</text></view>
			</view>
			<!-- <view class="buyVipBox" hover-class="buyVipBox2" @click="toBuyVip">购买会员</view> -->
			<image class="mImg" :src="`${baseUrl}/static/my/icon24.png`" mode="widthFix"></image>
		</view>
		<view class="pagesMain" v-if="token && token != -1">
			<my-title title1="选择充值金额"></my-title>
			<view class="moneyList">
				<block v-for="(item,index) in rechargeList" :key="index">
					<view :class="['moneyItem',moneyIndex == index ? 'active':'']" @click="checkMoney(item,index)">
						<view class="moneyPrice">￥{{item.money}}</view>
						<view class="moneyCount">获得{{item.score}}积分</view>
					</view>
				</block>
				<block v-for="(item,index) in 4" :key="index">
					<view class="moneyItem" style="height: 140rpx;" v-if="rechargeList.length == 0"></view>
				</block>
			</view>
			<!-- <view class="otherPrice">
				<view class="otherTitle">其他金额</view>
				<view class="otherInput">
					<u-input v-model="otherPrice" placeholder="请输入充值金额" type="digit" @input="inputPrice"/>
				</view>
			</view> -->
			<!-- 温馨提示 -->
			<my-title leftCount="温馨提示"></my-title>
			<view class="tipBox"><text style="margin-right: 4rpx;">若扣款成功，但账户未到账，请</text><button open-type="contact" style="color: var(--color);font-size: 28rpx;">联系客服</button></view>
			<!-- <view class="tipBox">充值代表已阅读<text style="color: var(--color);" @click="toDocument">《充值说明》</text></view> -->
			<my-submitBtn btnText="立即充值" @click="rechargeHandle"></my-submitBtn>
		</view>
		<view style="margin-top: 200rpx;" v-if="token == -1">
			<u-empty text="未登录" mode="permission">
				<view class="emptyBtn" hover-class="emptyBtnHover" slot="bottom" @click="toLogin">前往登录</view>
			</u-empty>
		</view>
		<my-loading :show="loadShow"></my-loading>
	</view>
</template>

<script>
	import { isLogin } from "../../mixins/isLogin.js"
	export default {
		mixins:[isLogin],
		data() {
			return {
				baseUrl:this.$baseUrl,
				token:'',
				userInfo:{},
				balanceMoney:0,
				// 其他金额
				otherPrice:'',
				// 选中金额的下标
				moneyIndex:0,
				rechargeList:[],
				params:{
					money:0,// 充值金额
				},
				loadShow:true
			};
		},
		onLoad(options) {
			
		},
		onShow() {
			this.token = uni.getStorageSync('token') || -1;
			this.getRemainInfo();
		},
		methods: {
			// 获取充值页面信息
			async getRemainInfo() {
				let res = await uni.$http('POST','recharge/pageInfo')
				console.log('获取充值页面信息',res);
				this.loadShow = false;
				if(res.code == 1){
					this.balanceMoney = res.data.score;
					this.rechargeList = res.data.list;
					this.params.money = this.rechargeList[this.moneyIndex].money;
				}
			},
			// 选择充值金额
			checkMoney(item,index){
				this.moneyIndex = index;
				this.params.money = item.money;
				this.otherPrice = '';
			},
			// 输入充值金额
			inputPrice(){
				if(this.otherPrice){
					this.params.money = this.otherPrice;
					this.moneyIndex = -1;
				}else{
					this.params.money = this.rechargeList[0].money;
					this.moneyIndex = 0;
				}
			},
			rechargeHandle(){
				uni.showModal({
					title: '充值提示',
					content: `确认充值${this.params.money}元吗？`,
					success: async (res)=> {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask:true
							})
							let res = await uni.$http('POST','recharge/active',this.params);
							console.log('充值',res);
							uni.hideLoading()
							if (res.code == 1) {
								uni.requestPayment({
									provider: "wxpay",
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: async res1 => {
										uni.showLoading({
											title: '验证支付中',
											mask:true
										})
										setTimeout(async ()=>{
											let res2 = await uni.$http('POST','recharge/isPay',{
												id: res.data.orders_id
											})
											uni.hideLoading()
											if (res2.code == 1) {
												uni.$u.toast('支付成功')
												setTimeout(()=>{
													uni.navigateBack()
												},1000)
											}else{
												uni.$u.toast('支付失败')
											}
											this.getRemainInfo();
										},700)
									},
									fail() {
										uni.$u.toast('支付失败')
									}
								})
							} else {
								uni.$u.toast(res.msg)
							}
						}
					}
				});
			},
			fmtMoney(money){
				return parseFloat(money).toFixed(2)
			},
			// 前往充值说明
			toDocument(){
				uni.navigateTo({
					url:"/pagesShare/document/document?id=4"
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss">
.pagesBox{
	.pagesBgImg {
		background-color: #f7f8fa;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		.image2{
			position: absolute;
			left: 0%;
			right: 0%;
			bottom: 0%;
		}
	}
	.brokerageCont {
		width: 100%;
		padding: 60rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		.moneyNum {
			width: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			margin-left: 32rpx;
			.canDraw {
				font-weight: 400;
				font-size: 26rpx;
				color: var(--color);
			}
			.starSign {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}
			.money {
				font-weight: 500;
				font-size: 52rpx;
				color: var(--color);
			}
		}
		.buyVipBox{
			width: 200rpx;
			height: 80rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 700;
			background-color: #f7b462;
			border-radius: 20rpx;
			letter-spacing: 2rpx;
			margin-right: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			z-index: 999;
		}
		.buyVipBox2{
			background-color: #ee998b;
		}
		.mImg {
			width: 300rpx;
			position: absolute;
			bottom: -24rpx;
			right: 0%;
		}
	}
	.pagesMain{
		background-color: #fff;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		padding: 0rpx 32rpx;
		position: relative;
	}
	// 充值金额
	.moneyList{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		.moneyItem{
			color: #458BFF;
			width: 49%;
			font-size: 36rpx;
			text-align: center;
			background-color: #F7F8FA;
			border: 2rpx solid #F7F8FA;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;
			.moneyPrice{
				font-weight: 500;
				font-size: 34rpx;
				color: #505050;
				position: relative;
				z-index: 999;
			}
			.moneyCount{
				font-weight: 400;
				font-size: 24rpx;
				color: #73797F;
				position: relative;
				z-index: 999;
			}
			.imageBox{
				position: absolute;
				top: 8rpx;
				left: 12rpx;
			}
			.textBox{
				font-weight: 700;
				font-size: 30rpx;
				color: #F77B39;
				position: absolute;
				top: 8rpx;
				right: 8rpx;
			}
		}
		.active{
			background-color: var(--colorBg);
			border: 2rpx solid var(--color);
			.moneyPrice{
				color: var(--color);
			}
			.moneyCount{
				color: var(--color);
			}
		}
	}
	// 其他充值金额
	.otherPrice{
		background-color: #F7F8FA;
		border-radius: 16rpx;
		padding: 16rpx 26rpx;
		display: flex;
		align-items: center;
		.otherTitle{
			font-weight: 600;
			font-size: 32rpx;
			color: #16202B;
			margin-right: 16rpx;
		}
		.otherInput{
			flex: 1;
		}
	}
	.payType{
		background-color: #F7F8FA;
		border-radius: 16rpx;
		padding: 16rpx 26rpx;
		.radioBox{
			display: flex;
			align-items: center;
			.imageBox{
				font-size: 0%;
			}
			.radioText{
				font-weight: 400;
				font-size: 32rpx;
				color: #16202B;
				margin-left: 8rpx;
				
			}
		}
	}
	// 提示
	.tipBox{
		font-weight: 400;
		font-size: 28rpx;
		color: #73797F;
		display: flex;
		align-items: center;
	}
	.emptyBtn{
		width: 260rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		background: var(--color);
		border-radius: 46rpx;
		letter-spacing: 4rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.emptyBtnHover{
		background: var(--colorHover);
	}
	// 提示弹窗
	.popupTip{
		width: 80vw;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		.tipTitle{
			font-weight: 600;
			font-size: 34rpx;
			color: #16202B;
			text-align: center;
		}
		.myInput{
			height: 76rpx;
			line-height: 76rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #303133;
			// background-color: #F7F8FA;
			border: 2rpx solid #dcdfe6;
			border-radius: 16rpx;
			padding: 0 24rpx;
			margin: 32rpx 0;
			.tipCount{
				font-weight: 400;
				font-size: 32rpx;
				color: #A1A5AA;
			}
		}
		.title1{
			font-weight: 400;
			font-size: 28rpx;
			color: #444C55;
			text-align: center;
			margin: 32rpx 0 16rpx 0;
		}
		.title2{
			font-weight: 600;
			font-size: 34rpx;
			color: #F77B39;
			text-align: center;
			margin: 16rpx 0 8rpx 0;
			display: flex;
			justify-content: center;
			align-items: flex-end;
		}
		.title3{
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			text-align: center;
			margin: 16rpx 0 32rpx 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btnBox{
			margin-top: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.btn{
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-weight: 600;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
				background: #F77B39;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
			}
			.btn1{
				width: 49%;
				color: #F77B39;
				background: #FFF1EB;
			}
			.btn2{
				width: 49%;
			}
		}
	}
}
// 输入框
::v-deep .u-input__input.data-v-460c1d26{
	font-size: 32rpx !important;
	font-family: PingFang SC, PingFang SC;
}
// 单选
::v-deep .u-radio{
	justify-content: space-between;
	flex-direction: row-reverse;
}
button::after {
  border: none !important;
  // padding: 0 !important;
  margin: 0 !important;
}
button {
  background-color: transparent !important;
  padding: 0 !important;
  line-height: inherit !important;
  margin: 0 !important;
  // width: auto !important;
  font-weight: 500 !important;
  border-radius: none !important;
}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>